import React, { useState } from 'react'
import { Form, Input, Button, Radio } from 'antd'
import { handleApprove, queryCertificate } from '~/api/approve-api'
import { getUserInfo } from '~/mock/user/userinfo'
import SuccessModal from '~/components/submit-successfully'
import { useLocation } from 'react-router-dom'

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 }
}
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 }
}

const { TextArea } = Input

const ApprovePage = () => {
  const { state }: any = useLocation()
  const [successVisible, setSuccessVisible] = useState(false)
  const { batchNo, borrowVoucherId } = state
  const userInfo = getUserInfo()
  const onFinish = async (values: any) => {
    const { approveStatus, approveRemark } = values
    await handleApprove({
      ...userInfo,

      approveRemark,
      approveStatus,
      batchNo
    })
    setSuccessVisible(true)
    console.log('Success:', values)
  }

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo)
  }

  const onClickViewCertificate = async () => {
    const { data } = await queryCertificate({ voucherId: borrowVoucherId })
    console.log('borrowVoucherId', data)
    window.open(data)
  }

  return (
    <div>
      <Form
        {...layout}
        name="basic"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        validateTrigger="onBlur"
      >
        <Form.Item name="approveStatus" label="审批结果" rules={[{ required: true, message: '请选择审批结果' }]}>
          <Radio.Group>
            <Radio value={11}>通过</Radio>
            <Radio value={10}>不通过</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item label="领导批示" name="approveRemark" rules={[{ required: true, message: '请输入领导批示' }]}>
          <TextArea />
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            审批
          </Button>
          <Button style={{ marginLeft: 8 }} onClick={onClickViewCertificate}>
            查看借用凭证
          </Button>
        </Form.Item>
      </Form>
      <SuccessModal visible={successVisible} />
    </div>
  )
}

export default ApprovePage
